<template>
  <li
    class="my-select-dropdown__item"
    :class="[{selected,disabled}]"
    @click.stop="handleClick"
  >{{label}}</li>
</template>

<script>
export default {
  name: "MyOption",
  inject: ["select"],
  props: {
    label: {
      type: String,
      default: "",
    },
    value: {
      type: String | Number | Boolean,
      require: true,
    },
    disabled: Boolean,
  },
  computed: {
    selected() {
      if (this.select.multiple) {
        return this.select.value.some((v) => v === this.value);
      } else {
        return this.select.value === this.value;
      }
    },
  },
  mounted() {
    this.select.updateOptions();
  },
  beforeDestroy() {
    this.select.updateOptions();
  },
  methods: {
    handleClick() {
      if (this.disabled) return;
      this.select.$emit("handleOptionClick", this);
    },
  },
};
</script>

<style>
</style>